<template>
    <container class="convert-font">
        <toolbar></toolbar>

        <el-card class="main">
            <el-row>
                <el-col :span="16">
                    <el-input class="input" v-model="input" type="textarea" :autosize="{minRows: 6}"></el-input>
                </el-col>
                <el-col class="buttons" :span="8">
                    <el-button-group class="group">
                        <el-button type="primary" size="small" @click="toUpperClick">全部大写</el-button>
                        <el-button type="primary" size="small" @click="toLowerClick">全部小写</el-button>
                    </el-button-group>
                    <br>
                    <el-button-group class="group">
                        <el-button type="info" size="small" @click="firstToUpperClick">首字母大写</el-button>
                        <el-button type="info" size="small" @click="firstToLowerClick">首字母小写</el-button>
                    </el-button-group>
                    <br>
                    <el-button-group class="group">
                        <el-button type="warning" size="small" @click="lineToHumpClick">下划线转驼峰</el-button>
                        <el-button type="warning" size="small" @click="humpToLineClick">驼峰转下划线</el-button>
                    </el-button-group>
                    <br>
                    <el-button-group class="group">
                        <el-button type="danger" size="small" @click="lineToSpaceClick">下划线转空格</el-button>
                        <el-button type="danger" size="small" @click="spaceToLineClick">空格转下划线</el-button>
                    </el-button-group>
                    <br>
                    <el-button-group class="group">
                        <el-button type="primary" size="small" style="background-color: #00bdd5"
                                   @click="lineToMiddleClick">下划线转中划线
                        </el-button>
                        <el-button type="primary" size="small" style="background-color: #00bdd5"
                                   @click="middleToLineClick">中划线转下划线
                        </el-button>
                    </el-button-group>
                </el-col>
            </el-row>
        </el-card>
    </container>
</template>

<script type="text/ecmascript-6">
  import Container from "../../components/common/Container";
  import Toolbar from "../../components/common/Toolbar";
  import { firstToLower, firstToUpper, toHump, toLine } from "../../utils/js/text";

  /**
   * @author 白雨浓
   * @date 2019/7/8 19:12
   *
   * 字体转换
   **/
  export default {
    name: 'convert-font',
    components: {Toolbar, Container},
    data() {
      return {
        input: '',
      }
    },
    methods: {
      toUpperClick() {
        this.input = this.input.trim();
        this.input = this.input.toUpperCase();
      },
      toLowerClick() {
        this.input = this.input.trim();
        this.input = this.input.toLowerCase();
      },
      firstToUpperClick() {
        this.input = this.input.trim();
        this.input = firstToUpper(this.input);
      },
      firstToLowerClick() {
        this.input = this.input.trim();
        this.input = firstToLower(this.input);
      },
      lineToHumpClick() {
        this.input = this.input.trim();
        this.input = toHump(this.input);
      },
      humpToLineClick() {
        this.input = this.input.trim();
        this.input = toLine(this.input);
      },
      lineToSpaceClick() {
        this.input = this.input.trim();
        this.input = this.input.replace(/_/g, ' ');
      },
      spaceToLineClick() {
        this.input = this.input.trim();
        this.input = this.input.replace(/ /g, '_');
      },
      lineToMiddleClick() {
        this.input = this.input.trim();
        this.input = this.input.replace(/_/g, '-');
      },
      middleToLineClick() {
        this.input = this.input.trim();
        this.input = this.input.replace(/-/g, '_');
      },
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    .convert-font {
    }

    .main {
        width 95%
        margin 20px auto
    }

    .input {
        font-size 1.5em
    }

    .buttons {
        text-align center
    }

    .group {
        margin 3px auto
    }
</style>
